<script type="text/javascript" src="./script/jquery.myPaginator.js"></script>
<script>
    
    $(function(){
        $("#radio_localidade").prop("checked", true);
        $("#div_exibe_cargas").myPaginator({
            formulario: document.consulta_localidade,
            url: "ajax.php?action=carga_consulta_localidade",
            click: detalhar_carga,
            conteudo : function(index, row){
                return '<table cellspacing="0" class="table_carga">'+
                    '<tr class="tr_carga"><td class="td_tipo" width="70">Origem:</td><td width="180" style="font-weight: bold">'+row.CAR_ORIGEM+'</td><td class="td_tipo" width="90">Ve&iacute;culo:</td><td width="150">'+row.CAR_VEICULO+'</td><td class="td_tipo" width="50">Data:</td><td>'+row.CAR_DATA_REGISTRO+'</td><td rowspan="4" class="td_logo_cliente" width="100"><img src="imagens/clientes/cliente_100x75.php?id='+row.CLI_ID+'" width="100" height="75" style="vertical-align: middle"/></td></tr>'+
                    '<tr class="tr_carga"><td class="td_tipo" width="70">Destino:</td><td width="180" style="font-weight: bold">'+row.CAR_DESTINO+'</td><td class="td_tipo" width="90">Carroceria:</td><td width="150">'+row.CAR_CARROCERIA+'</td><td class="td_tipo" width="50">Peso:</td><td>'+row.CAR_PESO+'</td></tr>'+
                    '<tr class="tr_carga"><td class="td_tipo" width="70">Produto:</td><td width="180">'+row.CAR_PRODUTO+'</td><td class="td_tipo" width="90">Rastreado:</td><td width="150">'+row.CAR_RASTREADO+'</td><td class="td_tipo" width="50">Valor:</td><td>'+row.CAR_VALOR+'</td></tr>'+
                    '<tr class="tr_carga"><td class="td_tipo" width="70">Especie:</td><td width="180">'+row.CAR_ESPECIE+'</td><td class="td_tipo" width="90">Observa&ccedil;&atilde;o:</td><td colspan="3">'+row.CAR_OBSERVACAO+'</td></tr>'+
                '</table><div class="table_carga_linha"></div>';
            }
        });
    });
    
    var clientes = new Array();
    
    function detalhar_carga(index, row){
        if (clientes[row.CLI_ID] == undefined){
            $.ajax({
              type: 'GET',
              async: true,
              url: "ajax.php?action=cliente_consulta&id="+row.CLI_ID,
              success: function(response){
                  clientes[row.CLI_ID] = response;
                  $.extend(row, response);
                  processar_carga(index, row);
              },
              dataType: "json"
            });
        }else{
            $.extend(row, clientes[row.CLI_ID]);
            processar_carga(index, row);
        }
        
    }
    
    function processar_carga(index, row){
        var conteudo = '<table cellspacing="0" width="100%">'+
            '<tr class="tr_carga"><td class="td_tipo" width="90">Origem:</td><td width="180" style="font-weight: bold">'+row.CAR_ORIGEM+'</td><td class="td_tipo" width="80">Ve&iacute;culo:</td><td width="140">'+row.CAR_VEICULO+'</td><td class="td_tipo" width="45">Data:</td><td>'+row.CAR_DATA_REGISTRO+'</td><td rowspan="5" class="td_logo_cliente" width="100"><img src="imagens/clientes/cliente_100x75.php?id='+row.CLI_ID+'" width="100" height="75" style="vertical-align: middle"/></td></tr>'+
            '<tr class="tr_carga"><td class="td_tipo" width="90">Destino:</td><td width="180" style="font-weight: bold">'+row.CAR_DESTINO+'</td><td class="td_tipo" width="80">Carroceria:</td><td width="140">'+row.CAR_CARROCERIA+'</td><td class="td_tipo" width="45">Peso:</td><td>'+row.CAR_PESO+'</td></tr>'+
            '<tr class="tr_carga"><td class="td_tipo" width="90">Produto:</td><td width="180">'+row.CAR_PRODUTO+'</td><td class="td_tipo" width="80">Rastreado:</td><td width="140">'+row.CAR_RASTREADO+'</td><td class="td_tipo" width="45">Valor:</td><td>'+row.CAR_VALOR+'</td></tr>'+
            '<tr class="tr_carga"><td class="td_tipo" width="90">Especie:</td><td width="100">'+row.CAR_ESPECIE+'</td><td class="td_tipo" width="80">Validade:</td><td colspan="3" style="font-weight: bold" width="140">'+row.CAR_DATA_VALIDADE+'</td></tr>'+
            '<tr><td class="td_tipo" width="90">Observa&ccedil;&atilde;o:</td><td colspan="5">'+row.CAR_OBSERVACAO+'</td></tr>'+
        '</table><div class="table_carga_linha"></div>';
        
        conteudo += '<table cellspacing="0" width="100%">'+
            '<tr class="tr_carga"><td class="td_tipo">Cliente:</td><td colspan="3" style="font-weight: bold">'+row.CLI_FANTASIA+'</td><td class="td_tipo">MSN:</td><td colspan="3">'+row.CLI_MSN+'</td></tr>'+
            '<tr class="tr_carga"><td class="td_tipo">E-mail:</td><td colspan="3">'+row.CLI_EMAIL+'</td><td class="td_tipo">SKYPE:</td><td colspan="3">'+row.CLI_SKYPE+'</td></tr>'+
            '<tr class="tr_carga"><td class="td_tipo" width="80">Telefone 1:</td><td width="100">'+row.CLI_TEL1+'</td><td class="td_tipo" width="80">Telefone 2:</td><td width="100">'+row.CLI_TEL2+'</td><td class="td_tipo" width="80">Celular:</td><td width="100">'+row.CLI_CELULAR+'</td><td class="td_tipo" width="80">Fax:</td><td width="100">'+row.CLI_FAX+'</td></td></tr>'+
        '</table><div class="table_carga_linha"></div>';
        
        $("#conteudo_detalhe_carga").html(conteudo);
        
        
        if(perfil == "administrador"){
            $(".acoes_button").show();
            $(".acoes_button").unbind("click");
            $("#visualizar_button").click(function(){window.open("index.php?page=carga_alterar&id="+row.CAR_ID);});
            $("#prorrogar_button").click(function(){prorrogar_carga(row.CAR_ID);});
            $("#finalizar_button").click(function(){finalizar_carga(row.CAR_ID);});
        }else if(perfil == "cliente"){
            if(CLI_ID == row.CLI_ID){
                $(".acoes_button").show();
                $(".acoes_button").unbind("click");
                $("#visualizar_button").click(function(){window.open("index.php?page=carga_alterar&id="+row.CAR_ID);});
                $("#prorrogar_button").click(function(){prorrogar_carga(row.CAR_ID);});
                $("#finalizar_button").click(function(){finalizar_carga(row.CAR_ID);});
            }else{
                $(".acoes_button").unbind("click");
                $(".acoes_button").hide();
                
            }
        }else{
            $(".acoes_button").hide();
            $(".acoes_button").unbind("click");
        }
        
        $("#exibe_carga").hide();
        $("#detalhe_carga").show();
        
        var mapa_inicializado = false;
        if(! mapa_inicializado){
            initialize();
            mapa_inicializado = true;
        }
        calcRoute(row);
        $(".ajax-loading").hide();
    }
    
    function consultar_localidade(){
        $("#titulo_div_exibe_cargas").html("Resultado da busca por Localidade");
        $("#detalhe_carga").hide();
        $("#exibe_carga").show();
        $("#div_exibe_cargas").myPaginator("update", {
            formulario: document.consulta_localidade,
            url: "ajax.php?action=carga_consulta_localidade"
        });
        return false;
    }
    
    function consultar_proximidade(){
        $("#titulo_div_exibe_cargas").html("Resultado da busca por Proximidade");
        if ($("#prox_cidade").val() == ""){
            alert("Selecione uma cidade");
            return false;
        }
        $("#detalhe_carga").hide();
        $("#exibe_carga").show();
        $("#div_exibe_cargas").myPaginator("update", {
            formulario: document.consulta_proximidade,
            url: "ajax.php?action=carga_consulta_proximidade"
        });
        return false;
    }
    
    function consultar_embarcador(){
        $("#titulo_div_exibe_cargas").html("Resultado da busca por Embarcador");
        if ($("#input_embarcador").val() == ""){
            alert("Digite um valor para embarcador");
            return false;
        }
        $("#detalhe_carga").hide();
        $("#exibe_carga").show();
        $("#div_exibe_cargas").myPaginator("update", {
            formulario: document.consulta_embarcador,
            url: "ajax.php?action=carga_consulta_embarcador"
        });
        return false;
    }
    
    // Google maps
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;
    var brasil = new google.maps.LatLng(-14.790141, -51.37207);

    
    function initialize() {
      directionsDisplay = new google.maps.DirectionsRenderer();
      var mapOptions = {
//        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
//        center: brasil
      }
      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
      directionsDisplay.setMap(map);
    }

    function calcRoute(row) {
      var request = {
          origin: new google.maps.LatLng(eval(row.CID_ORIGEM_LAT), eval(row.CID_ORIGEM_LNG)),
          destination: new google.maps.LatLng(eval(row.CID_DESTINO_LAT), eval(row.CID_DESTINO_LNG)),
          // Note that Javascript allows us to access the constant
          // using square brackets and a string value as its
          // "property."
          travelMode: google.maps.TravelMode.DRIVING
      };
      directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            $("#map_mensagem").hide();
        }else if(status == google.maps.DirectionsStatus.ZERO_RESULTS){
            var mapOptions = {
                zoom: 4,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                center: brasil
            }
            map.setOptions(mapOptions);
            
            var markerOrigem = new google.maps.Marker({
                position: new google.maps.LatLng(eval(row.CID_ORIGEM_LAT), eval(row.CID_ORIGEM_LNG)),
                title: row.CAR_ORIGEM
            });
            
            var markerDestino = new google.maps.Marker({
                position: new google.maps.LatLng(eval(row.CID_DESTINO_LAT), eval(row.CID_DESTINO_LNG)),
                title: row.CAR_DESTINO
            });

            // To add the marker to the map, call setMap();
            markerOrigem.setMap(map);
            markerDestino.setMap(map);
            $("#map_mensagem").html("Desculpe-nos, o google n&atilde;o pode encontrar uma rota entre esses destinos!").show();
        }
      });
    }
    
    function finalizar_carga(CAR_ID){
        var link = "action.php?action=ajax_carga_finaliza";
        $.ajax({
            type: "POST",
            url: link,
            async: true,
            data: {"CARGAS": {0:CAR_ID}},
            success: function(response) {
                showInfoMessage(response, 4000);
                $("#div_exibe_cargas").myPaginator('reload');
           }});
    }
    
    function prorrogar_carga(CAR_ID){
        var link = "action.php?action=ajax_carga_prorroga";
        $.ajax({
            type: "POST",
            url: link,
            async: true,
            data: {"CARGAS": {0:CAR_ID}},
            success: function(response) {
                showInfoMessage(response, 4000);
                $("#div_exibe_cargas").myPaginator('reload');
            }});
    }
    

</script>


<div class="div_conteudo" >
    <img src="./imagens/lupa_128x128.png" alt="" width="100" height="100" style="float: right; background-color: #fcfcfc"/>
    <span class="titulo_conteudo" style="height: 22px;">Filtre seu resultado&nbsp;&nbsp;&nbsp;&nbsp;<label style="color: #c30"><input id="radio_localidade" name="filtro" value="localidade"  checked="checked" type="radio" onchange="$('#localidade').show();$('#proximidade').hide();$('#embarcador').hide();"/>Localidade</label>
        <label style="color: #c30"><input name="filtro" value="proximidade" type="radio" onchange="$('#localidade').hide();$('#proximidade').show();$('#embarcador').hide();"/>Proximidade</label>
        <label style="color: #c30"><input name="filtro" value="embarcador" type="radio" onchange="$('#localidade').hide();$('#proximidade').hide();$('#embarcador').show();"/>Embarcador</label></span>
    <div class="corpo_conteudo" id="localidade">
        <form style="margin: 0" name="consulta_localidade" onSubmit="return consultar_localidade();">
            <table border="0">
                <tr>
                    <td>
                        <span style="font-weight: bold; display: inline-block; padding-top: 2px; padding-bottom: 2px; color: #006600;">Origem da carga</span><br/>
                        <select id="origem_uf" name="EST_ORIGEM_SIGLA" onchange="buscaCidade('origem_cidade',this.value);">
                            <option value=""></option>
                            <?php
                                include $app.'dao/dao_localidade.php';

                                $dao_localidade = new dao_localidade();
                                $result = $dao_localidade->selectAllUF();

                                $UF = "";
                                foreach ($result as $row){
                                  $UF .= "<option value='".$row['EST_SIGLA']."'>".$row['EST_SIGLA']."</option>";
                                }
                                echo $UF;
                            ?>
                        </select >
                        <select style="width: 200px" id="origem_cidade" name="CID_ORIGEM_ID">
                        </select>
                    </td>
                    <td>
                        <span style="font-weight: bold; display: inline-block; padding-top: 2px; padding-bottom: 2px; color: #006600;">Destino da carga</span><br/>
                        <select id="destino_uf" name="EST_DESTINO_SIGLA" onchange="buscaCidade('destino_cidade',this.value);">
                            <option value=""></option>
                            <?php
                                echo $UF;
                            ?>
                        </select>
                        <select style="width: 200px" id="destino_cidade" name="CID_DESTINO_ID">
                        </select>
                    </td>
                    <td style="vertical-align: bottom"><input type="submit" value="Localizar"/></td>
                </tr>
            </table>
        </form>
    </div>
    <div style="display: none" class="corpo_conteudo" id="proximidade">
        <form style="margin: 0" name="consulta_proximidade" onSubmit="return consultar_proximidade();">
            <table border="0">
                <tr>
                    <td>
                        <span style="font-weight: bold; display: inline-block; padding-top: 2px; padding-bottom: 2px; color: #006600;">Localidade</span><br/>
                        <select id="prox_uf" name="EST_SIGLA" onchange="buscaCidade('prox_cidade',this.value);">
                            <option value=""></option>
                            <?php
                                echo $UF;
                            ?>
                        </select >
                        <select style="width: 200px" id="prox_cidade" name="CID_ID">
                            <option value="">&nbsp;</option>
                        </select>
                    </td>
                    <td>
                        <span style="font-weight: bold; display: inline-block; padding-top: 2px; padding-bottom: 2px; color: #006600;">Tipo</span><br/>
                        <select id="prox_tipo" name="TIPO">
                            <option value="origem">Origem</option>
                            <option value="destino">Destino</option>
                            <option value="ambos">Ambos</option>
                        </select>
                    </td>
                    <td>
                        <span style="font-weight: bold; display: inline-block; padding-top: 2px; padding-bottom: 2px; color: #006600;">Dist&acirc;ncia</span><br/>
                        <select id="prox_distancia" name="DISTANCIA">
                            <option value="25">25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                            <option value="200">200</option>
                        </select>
                    </td>
                    <td style="vertical-align: bottom"><input type="submit" value="Localizar"/></td>
                </tr>
            </table>
        </form>
    </div>
    <div style="display: none" class="corpo_conteudo" id="embarcador">
        <form style="margin: 0" name="consulta_embarcador" onSubmit="return consultar_embarcador();">
            <table border="0">
                <tr>
                    <td colspan="2"><span style="font-weight: bold; display: inline-block; padding-top: 2px; padding-bottom: 2px; color: #006600;">Nome do Embarcador</span><br/>
                        <input name="CLI_FANTASIA" id="input_embarcador" size="50"/></td><td style="vertical-align: bottom"><input type="submit" value="Localizar"/></td>
                </tr>
            </table>
        </form>
    </div>
    <br/>
<div class="div_conteudo" id="exibe_carga">
<span class="titulo_conteudo" id="titulo_div_exibe_cargas">&Uacute;ltimas Cargas Cadastradas</span>
<div class="corpo_conteudo" id="div_exibe_cargas">
</div>
</div>
    
<div class="div_conteudo" id="detalhe_carga" style="display: none">
    <span class="titulo_conteudo">Detalhes da carga</span>
    <div class="corpo_conteudo" id="conteudo_detalhe_carga">
    </div>
    
    <div id="map_canvas" style="width: auto; height: 500px"></div>
    <div id="map_mensagem" style="width: auto; text-align: center; color: #060; font-weight: bold; font-size: 15px; padding: 4px 0"></div>
    <div class="table_carga_linha"></div>
    <div class="corpo_conteudo">
        <form>
            <input type="button" value="Voltar" onclick="$('#exibe_carga').show();$('#detalhe_carga').hide();"/>
            <input type="button" class="acoes_button" id="visualizar_button" value="Visualizar" style="display: none"/>
            <input type="button" class="acoes_button" id="prorrogar_button" value="Prorrogar" style="display: none"/>
            <input type="button" class="acoes_button" id="finalizar_button" value="Finalizar" style="display: none"/>
        </form>  
    </div>
</div>
    
<div id="erro"></div>
</div>